.dropdown-container {
    position: relative;
    max-width: 200px;

    .dropdown-button {
        min-width: 160px;
    }

    .dropdown-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        top: 4px;
        position: absolute;
        min-width: 100%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        display: none;
        background-color: var(--bg-secondary);
        z-index: 1;
        max-height: 198px;
        overflow: scroll;
        border: 1px solid var(--neutral-100);
        border-radius: 4px;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .dropdown-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 12px;
        height: 36px;
        margin: 4px;
        border-radius: 4px;
        border-bottom: none;
        white-space: nowrap;
        overflow: hidden;
        background-color: var(--bg-secondary);
        font: var(--sm);
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 500ms;

        div {
            width: 80px;
        }

        &:hover,
        &.is-selected {
            background-color: var(--neutral-200);

            svg.lucide {
                display: block;
            }
        }

        &:active {
            transform: scale(0.98);
            transition: transform 150ms ease-out;
        }

        svg.lucide {
            display: none;
            width: 20px;
            height: 20px;
            padding: 4px;
            margin-right: 8px;
            transition: background-color 500ms;

            line,
            circle,
            rect,
            path {
                stroke: var(--neutral-600);
            }

            &:hover {
                background-color: var(--neutral-200);
                border-radius: 4px;
            }

            &:active {
                transform: scale(0.97);
                transition: transform 150ms ease-out;
            }
        }
    }

    &.is-open {
        .dropdown-menu {
            display: block;
            animation: dropdown-fade-in 0.15s ease-out;
        }

        .dropdown-button {
            border-radius: 6px 6px 0 0;
        }
    }
}

@keyframes dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}